<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>sm4</title>
    <!--    <script th:src="@{/js/sm4/sm4.js}"></script>-->
    <!--    <script th:src="@{/js/jquery.min.js}"></script>-->

    <script src="../static/js/sm4/sm4.js"></script>
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>
<h3>SM4-ECB</h3>
当前sm4加密密钥：<span id="key"></span>
<div class="toolbar">
    <h4>ECB加密</h4>
    <input type="text" placeholder="请输入当前要加密的文本" id="encrypt-ecb"/>
    <button onclick="generateCipherECB()">生成密文</button>
    <br/>
    <textarea id="Ecb-encrypt" style="margin-top: 10px"></textarea>

    <hr width="250px" align="left"/>
    <h4>ECB解密</h4>
    <input type="text" placeholder="请输入当前要解密的文本" id="decrypt-ecb"/>
    <button onclick="generateLightECB()">生成明文</button>
    <br/>
    <textarea id="Ecb-decrypt" style="margin-top: 10px"></textarea>
</div>

<h3>SM4-CBC</h3>
当前sm4加密向量：<span id="iv"></span>
<div class="toolbar">
    <h4>CBC加密</h4>
    <input type="text" placeholder="请输入当前要加密的文本" id="encrypt-cbc"/>
    <button onclick="generateCipherCBC()">生成密文</button>
    <br/>
    <textarea id="Cbc-encrypt" style="margin-top: 10px"></textarea>

    <hr width="250px" align="left"/>
    <h4>CBC解密</h4>
    <input type="text" placeholder="请输入当前要解密的文本" id="decrypt-cbc"/>
    <button onclick="generateLightCBC()">生成明文</button>
    <br/>
    <textarea id="Cbc-decrypt" style="margin-top: 10px"></textarea>
</div>

<script>


    /**
     * 加密密钥与加密向量 (此方法只用于页面显示，更改密钥和向量请转至sm4.js 448行与449行)
     *
     * */
    $(function () {
        $('#key').html("BIOHBK546786Njhj");
        $('#iv').html("JOINioj0293JKIgh");

    })

    // ecb生成密文
    function generateCipherECB() {
        var msg = $('#encrypt-ecb').val();
        var encryptData = encryptECBSm4(msg);
        $('#Ecb-encrypt').val(encryptData);
    }

    // ecb生成明文
    function generateLightECB() {
        var msg = $('#decrypt-ecb').val();
        var decryptData = decryptECBSm4(msg);
        $('#Ecb-decrypt').val(decryptData);
    }


    /**
     * sm4 ecb 加密
     * */
    function encryptECBSm4(content) {
        if (content === undefined) {
            return ""
        }
        var sm4 = new SM4Util()
        return sm4.encryptData_ECB(content)
    }

    /**
     * sm4 ecb 解密
     * */
    function decryptECBSm4(content) {
        if (content === undefined) {
            return ""
        }
        var sm4 = new SM4Util()
        return sm4.decryptData_ECB(content)
    }

    /**=============================**/


    // cbc 生成密文
    function generateCipherCBC() {
        var msg = $('#encrypt-cbc').val();
        var encryptData = encryptCBCSm4(msg);
        $('#Cbc-encrypt').val(encryptData);
    }

    // cbc 生成明文
    function generateLightCBC() {
        var msg = $('#decrypt-cbc').val();
        var decryptData = decryptCBCSm4(msg);
        $('#Cbc-decrypt').val(decryptData);
    }


    /**
     * sm4 cbc 加密
     * */
    function encryptCBCSm4(content) {
        if (content === undefined) {
            return ""
        }
        var sm4 = new SM4Util()
        return sm4.encryptData_CBC(content)
    }

    /**
     * sm4 cbc 解密
     * */
    function decryptCBCSm4(content) {
        if (content === undefined) {
            return ""
        }
        var sm4 = new SM4Util()
        return sm4.decryptData_CBC(content)
    }


</script>
</body>
</html>